<html>
  <head>
    <link rel="stylesheet" href="/static/style.css" />
    <link href='http://fonts.googleapis.com/css?family=Raleway:100&v1' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=News+Cycle' rel='stylesheet' type='text/css'>
    <title>Posteet - checkout button maker</title>
  </head>
    <body>
      <div id="container">
        <div>
          <label id="site_title">Posteet |</label><label> The checkout button maker</label>
          <hr/>
          <table>
          <form method="post" action ="/">
            <tr>
              <td class="label_title">Your Merchant ID : </td>
              <td><input type="text" id="merchant_id" name="merchant_id" class="params" value="{% if pass_on.merchant_id %}{{ pass_on.merchant_id }}{% endif %}" style="width: 200px;"/></td>
            </tr>
            <tr>
              <td class="label_title">Item Name : </td>
              <td><input type="text" id="item_name" name="item_name" class="params" value="{% if pass_on.item_name %}{{ pass_on.item_name }}{% endif %}"/></td>
            </tr>
            <tr>
              <td class="label_title">Item Description : </td>
              <td><input type="text" id="item_description" name="item_description" class="params" value="{% if pass_on.item_description %}{{ pass_on.item_description }}{% endif %}" style="width: 700px;"/></td>
            </tr>
            <tr>
              <td class="label_title">Quantity : </td>
              <td><input type="text" id="quantity" name="quantity" class="params" value="{% if pass_on.item_quantity %}{{ pass_on.item_quantity }}{% endif %}" style="width: 100px;"/></td>
            </tr>
            <tr>
              <td class="label_title">Price per unit : </td>
              <td><input type="text" id="price" name="price" class="params" value="{% if pass_on.item_price %}{{ pass_on.item_price }}{% endif %}" style="width: 100px;"/></td>
            </tr>
            <tr>
              <td class="label_title">Currency : </td>
              <td><input type="text" id="currency" name="currency" class="params" value="{% if pass_on.item_currency %}{{ pass_on.item_currency }}{% else %}USD{% endif %}" style="width: 50px;"/></td>
            </tr>
            <tr>
              <td class="label_title">Button size : </td>
              <td>
                <select class="params" id="button_size" name="button_size">
                  <option value="w=180&h=46">Large - 180px x 46px</option>
                  <option value="w=168&h=44">Medium - 168px x 44px</option>
                  <option value="w=160&h=43">Small - 160px x 43px</option>
                  <option value="w=152&h=30">Mobile(High-end devices) - 152px x 30px</option>
                  <option value="w=118&h=24">Mobile(Low-end devices) - 118px x 24px</option>
                </select>
                <a href="https://checkout.google.com/seller/checkout_buttons.html#generate_button_url" target="_blank">size guide</a>
            <tr>
              <td></td>
              <td><input type="submit" class="button" value="Make Button" style="width: 100px;">
              </form>
          </table>

        </div>
        {% if button_code %}
        <div id="result">
          <b><label class="label_title">Here's your button</label></b><br/><a href="{{ cart_url }}" target="_blank"><img src="{{ image_url }}"></a>
          <br/><br/>
          <b><label class="label_title">Copy this code to generate the button for the shopping cart</label></b><br/>
          <textarea id="populated_code" style="width:800px;height:100px;">{{ button_code }}</textarea><br/>
          <label class="label_title">...or you can use the short link <b>{{ short_url }}</b></label>
      </div>
      {% endif %}
    </body>
</html>

